<template>
  <div class="m-2.5 px-2.5">
    <div class="bg-slate-100 px-2 py-2 mb-4">表字段查询</div>
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="字段名或注释" prop="search">
        <el-input
          v-model="queryParams.search"
          placeholder="请输入字段名或注释"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list" style="width: 99.9%" max-height="560px">
      <el-table-column label="字段名称" align="center" prop="name" />
      <el-table-column label="字段注释" align="center" prop="comment" />
      <!-- <el-table-column label="业务描述" align="center" prop="comment" /> -->
      <el-table-column
        label="允许null"
        align="center"
        prop="ableBeNull"
        :formatter="(row) => (row.ableBeNull ? '允许' : '不允许')"
      />
      <el-table-column label="字段类型" align="center" prop="type" :formatter="formatFieldType" />
      <el-table-column label="字段长度" align="center" prop="length" />
      <el-table-column label="字段精度" align="center" prop="decimalLength" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="pageParams.pageNum"
      v-model:limit="pageParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue';
  import { pageSdkDqDsTbCl } from '@/api/web/db/dataquery/sdkDqDsTbCl';
  // import modal from '@/plugins/modal';
  import { useFieldOptions } from '../useConstant';

  const { formatFieldType } = useFieldOptions();

  const props = defineProps({
    selectPNode: {
      type: Object,
      default: () => ({}),
    },
  });

  const loading = ref(false);
  const queryRef = ref(null);
  const showSearch = ref(true);

  const list = ref([]);
  const total = ref(0);
  const queryParams = ref({
    cateId: null,
    dsId: null,
    tbId: null,
    tenantId: null,
    name: null,
    search: null,
  });

  const pageParams = ref({
    pageNum: 1,
    pageSize: 10,
  });

  watch(
    () => props.selectPNode,
    (pnode) => {
      if (pnode) {
        queryParams.value.tbId = pnode.id;

        getList();
        // getCateInfo();
      }
    },
    { immediate: true },
  );

  function getList() {
    loading.value = true;
    pageSdkDqDsTbCl(pageParams.value, queryParams.value)
      .then((res) => {
        list.value = res?.data?.records ?? [];
        total.value = res?.data?.total ?? 0;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleQuery() {
    pageParams.value.pageNum = 1;
    getList();
  }
  function resetQuery() {
    queryRef.value?.resetFields();
    queryParams.value.tbId = props.selectPNode.id;
    handleQuery();
  }
</script>
<style lang="scss" scoped></style>
